import { SearchBar, Tabs } from 'antd-mobile'
import { AppstoreOutline } from 'antd-mobile-icons'
import './index.scss'
import { useEffect, useState } from 'react'
import { fetchChannelList, type ChannelItem } from '@/apis/channel'
import ArticleListCache from './ArticleListCache'
// import ArticleList from './ArticleList'

function Home() {
  // 组件状态
  const [curChannelId, setCurChannelId] = useState<string>('0')
  // 频道列表
  const [channels, setChannels] = useState<ChannelItem[]>([])
  useEffect(() => {
    (async () => {
      const res = await fetchChannelList()
      setChannels(res.data.channels)
    })()
  }, [])

  // 组件方法
  return (
    <div className="home-container">
      {/* 顶部搜索栏 */}
      <div className="top-bar">
        <div className="logo">
          <h1 className="title">极客园</h1>
        </div>
        <SearchBar className="search" placeholder="搜索" />
      </div>
      {/* 频道分类列表 */}
      <div className="Channel-classification">
        <Tabs
          defaultActiveKey="0"
          className="tabs"
          onChange={(key) => setCurChannelId(key)}
        >
          {/* 根据频道列表渲染tab */}
          {channels.map((item) => (
            <Tabs.Tab title={item.name} key={item.id} />
          ))}
        </Tabs>
        <AppstoreOutline className="moreIcon" />
      </div>
      {/* 文章列表 */}
      <div className="article-list">
        {/* <ArticleList channelId={curChannelId}></ArticleList> */}
        <ArticleListCache curChannelId={curChannelId}></ArticleListCache>
      </div>
    </div>
  )
}

export default Home
